<template>
  <div v-if="true">
    <topbar title="扫码">
      <router-link to="/home" slot="left" @click.native='cancelScan' class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></router-link>
    </topbar>
    <div class="mui-content">
      <div class="scan">
        <div id="bcid">
          <div class="content"></div>
        </div>
        <footer>
          <!--<button @click="startScan" v-show="isShow">点击扫描</button>-->
          <!--<button @click="cancelScan">取消</button>-->
          <div class="fbt" @click="cancelScan">取　 消</div>
        </footer>
      </div>
    </div>
  </div>
</template>

<!--<script type='text/ecmascript-6'>-->
  <!--let scan = null;-->
  <!--// 点手机虚拟返回键-->
  <!--document.addEventListener('plusready', function () {-->
    <!--// 注册返回按键事件-->
    <!--plus.key.addEventListener('backbutton', function () {-->
      <!--// 事件处理-->
      <!--if (window.location.hash === '#/demo') {-->
        <!--scan.cancel();// 关闭扫描-->
        <!--scan.close();// 关闭条码识别控件-->
      <!--}-->
    <!--}, false);-->
  <!--});-->
  <!--export default{-->
    <!--data () {-->
      <!--return {-->
        <!--code: {},-->
        <!--isShow: true,-->
        <!--showMe: false // 是否展示当前页面-->
      <!--};-->
    <!--},-->
    <!--components: {-->
    <!--},-->
    <!--mounted () {-->
      <!--// 设置当前状态为加载中-->
      <!--this.$store.dispatch('setLoading', true);-->
      <!--this.mui.plusReady(function () {-->
        <!--plus.screen.lockOrientation('portrait-primary');-->
      <!--});-->
      <!--this.startScan();// 进入页面就调取扫一扫-->
      <!--// 页面显示-->
      <!--setTimeout(() => {-->
        <!--this.$store.dispatch('setLoading', false);-->
        <!--this.showMe = true;-->
      <!--}, 2000);-->
    <!--},-->
    <!--created () {-->
      <!--this.$store.dispatch('setLoading', false);-->
      <!--this.startRecognize();-->
      <!--this.startScan();-->
    <!--},-->
    <!--methods: {-->
      <!--// 创建扫描控件-->
      <!--startRecognize () {-->
        <!--let that = this;-->
        <!--if (!window.plus) return;-->
        <!--that.isShow = false;-->
        <!--// 创建条码扫描识别控件-->
        <!--scan = new plus.barcode.Barcode('bcid');-->
        <!--// 条码识别成功-->
        <!--scan.onmarked = onmarked;-->
        <!--function onmarked (type, result, file) {-->
          <!--switch (type) {-->
            <!--case plus.barcode.QR:-->
              <!--type = 'QR';-->
              <!--break;-->
            <!--default:-->
              <!--type = '其它' + type;-->
              <!--break;-->
          <!--}-->
          <!--if (result.indexOf('id') !== -1 && result.indexOf('config_id') !== -1) {-->
            <!--if (result.indexOf('queue') !== -1) {-->
              <!--that.code = JSON.parse(result);-->
              <!--scan.cancel();// 关闭扫描-->
              <!--scan.close();// 关闭条码识别控件-->
              <!--window.opener = null;-->
              <!--window.open('', self);-->
              <!--window.close();-->
              <!--that.global.queueid = that.code['config_id'];-->
              <!--let routeData = that.$router.resolve({ name: 'queue' });-->
              <!--window.open(routeData.href, '_blank');-->
            <!--} else {-->
              <!--that.code = JSON.parse(result);-->
              <!--scan.cancel();// 关闭扫描-->
              <!--scan.close();// 关闭条码识别控件-->
              <!--window.opener = null;-->
              <!--window.open('', self);-->
              <!--window.close();-->
              <!--that.global.changeShowType = 'food';-->
              <!--that.global.storeId = that.code['config_id'];-->
              <!--that.global.tableNumber = that.code['id'];-->
              <!--that.$router.push('business');-->
            <!--}-->
          <!--} else {-->
            <!--alert('无效二维码');-->
          <!--}-->
        <!--}-->
      <!--},-->
      <!--// 开始扫描-->
      <!--startScan () {-->
        <!--if (!window.plus) return;-->
        <!--this.startRecognize();// 创建控件-->
        <!--scan.start();-->
      <!--},-->

      <!--cancelScan () {-->
        <!--this.isShow = true;-->
        <!--scan.cancel();// 关闭扫描-->
        <!--scan.close();// 关闭条码识别控件-->
        <!--window.history.go(-1);-->
      <!--}-->
    <!--}-->
  <!--};-->
<!--</script>-->
<style lang="less">
  .mui-content{
    padding: 44px 0 60px 0;/*px*/
    box-sizing: border-box;
    margin-top: 60px;/*px*/
  }
  .scan {
    background: #00abf2;
    height: 100%;
  }
  .scan #bcid {
    height: auto;
    width: 3.4rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;/*px*/
    bottom: 11.9rem;
    text-align: center;
  }
  .scan footer {
    width: 100%;
    height: 1.5rem;
    position: absolute;
    bottom: 0;
    line-height: 1rem;
    text-align: center;
    color: #FFF;
  }
  .scan footer button{
    width: 45%;
    font-size: 1rem;/*px*/
  }
  .clickBtn,.cancelBtn{
    margin-top:20px;/*px*/
    width: 150px;/*px*/
    height: 60px;/*px*/
    text-align: center;
  }
  .cancelBtn{
    margin-left: 20px ;/*px*/
  }
  .scan footer .fbt{
    padding-top: .2rem;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: #FFCC33;
    float: left;
    font-size: .8rem;
  }
  .scan footer .fbt:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
  }
</style>
